Els selectors de fill directe en CSS són selectors compostos que ens permeten seleccionar NOMÉS els fills directes d'un element dins de l'HTML.
En el fitxer html que us proposo, si volguessim seleccionar tots els p dins del div amb classe container podriem utilitzar un selector que ja hem vist.
.container p {
background-color: teal;
}
Hi ha un detall important en l'html. El paràgraf de la linia 28 és nét del div amb classe container de la linia 20. Per tant, si volguessim obviar aquest paràgraf nét i només seleccionar els dos paràgrafs fills directes (linia 21 i 35) del div amb classe container de la linia 20, podriem utilitzar els selectors de fills directes. Es fa servir el símbol > també anomenat "més gran que".
.container > p {
background-color: teal;
}
En la documentació de w3schools teniu més informació sobre els selectors i els seus patrons.